<template>
  <div class="order-create">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="发送者" prop="senderId">
        <el-input v-model="form.senderId" placeholder="请输入发送者ID"/>
      </el-form-item>
      <el-form-item label="接收者" prop="receiverId">
        <el-input v-model="form.receiverId" placeholder="请输入接收者ID"/>
      </el-form-item>
      <el-form-item label="取件地址" prop="pickupAddressId">
        <el-input v-model="form.pickupAddressId" placeholder="请输入取件地址ID"/>
      </el-form-item>
      <el-form-item label="送件地址" prop="deliveryAddressId">
        <el-input v-model="form.deliveryAddressId" placeholder="请输入送件地址ID"/>
      </el-form-item>
      <el-form-item label="包裹重量(kg)" prop="packageWeight">
        <el-input-number v-model="form.packageWeight" :precision="2" :step="0.1"/>
      </el-form-item>
      <el-form-item label="包裹体积(m³)" prop="packageVolume">
        <el-input-number v-model="form.packageVolume" :precision="2" :step="0.1"/>
      </el-form-item>
      <el-form-item label="包裹描述" prop="packageDescription">
        <el-input type="textarea" v-model="form.packageDescription"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">创建订单</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addOrders } from '@/api/system/orders'

export default {
  name: 'OrderCreate',
  data() {
    return {
      form: {
        senderId: '',
        receiverId: '',
        pickupAddressId: '',
        deliveryAddressId: '',
        packageWeight: 0,
        packageVolume: 0,
        packageDescription: ''
      },
      rules: {
        senderId: [{ required: true, message: '请输入发送者ID', trigger: 'blur' }],
        receiverId: [{ required: true, message: '请输入接收者ID', trigger: 'blur' }],
        pickupAddressId: [{ required: true, message: '请输入取件地址ID', trigger: 'blur' }],
        deliveryAddressId: [{ required: true, message: '请输入送件地址ID', trigger: 'blur' }],
        packageWeight: [{ required: true, message: '请输入包裹重量', trigger: 'blur' }],
        packageVolume: [{ required: true, message: '请输入包裹体积', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          addOrders(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.resetForm()
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script> 